<template>
    <div>
        <div class="top">
            <img src="../img/back.png" alt="" class="back" @click="back()">
            <span>本周特惠</span>
        </div>
        <table></table>
        <mt-navbar class="page-part" v-model="active">
            <mt-tab-item id="1">全部</mt-tab-item>
            <mt-tab-item id="2">人气</mt-tab-item>
            <mt-tab-item id="3">销量</mt-tab-item>
            <mt-tab-item id="4">价格</mt-tab-item>
        </mt-navbar>
        <mt-tab-container :active.sync="active" v-model="active">
                <mt-tab-container-item id="1">
                    <div class="product">
                        <div v-for="(item,i) of list" :key="i">
                            <img :src="`http://127.0.0.1:3000/`+item.path" class="p1">
                            <p class="title">{{item.title}}</p>
                            <p class="title" style="margin-top:-10px;color:red;">￥{{item.price}}</p>
                            <p class="title" style="margin-top:-10px;">已售出{{item.online}}</p>
                        </div>
                    <div style="font-size:14px;text-align: center;margin-top:10px;color:#666;">
                    <span>—</span>
                    <span style="margin:0 10px;">已经到底啦</span>
                    <span>—</span>
                    </div>
                    <div style="width:100%;height:80px;"></div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                  <people></people>
                </mt-tab-container-item>
                <mt-tab-container-item id="3">
                  <people></people>
                </mt-tab-container-item>
                <mt-tab-container-item id="4">
                    <price></price>
                </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>
<script>
import people from "./people.vue"
import price from "./price.vue"
export default {
    name: 'page-navbar',
    data() {
        return {
            list:[],
            active: "1",
        }
    },
    components:{
        "people":people,
        "price":price
    },
    methods: {
        back(){
            this.$router.go(-1)
        },
        loadMove(){
             let url="all";
             let obj={};
             this.axios.get(url,{params:obj}).then(result=>{
                 let rows=this.list.concat(result.data.data);
                 this.list=rows;
             })
        }
    },
    created(){
        this.loadMove()
    },
}
</script>
<style scoped>
    .top{
        background: #000;
        width:100%;
        height:40px;
        line-height:40px;
        color:#fff;
        position: fixed;
        margin-bottom:30px;
        z-index:1000;
    }
    .back{
        width:35px;
        margin-right:120px;
        vertical-align: middle;
    }
    .page-part{
        margin-top:40px;
    }
    .mint-navbar .mint-tab-item{
        color:#666;
    }
    .mint-navbar .mint-tab-item.is-selected{
        border-bottom: 2px solid orange;
        color: #000;
    }
    .product{
        margin-top:10px;
        display: flex; 
        justify-content: space-around;
        flex-wrap:wrap;
    }
    .p1{
        width:175px;
        height:165px;
        margin-bottom:-7px;
    }
    .title{
        font-size:14px;
    }
</style>